<template>
	<view style="display:flex;flex-direction:column;">
		<!-- 通用列表 -->
		<template v-if="boxSwiperGroup.length">
			<box-swiper-group
				v-for="item in boxSwiperGroup"
				:style="'order:'+item.order+';'"
				:item="item"></box-swiper-group>
		</template>
		<!-- 通用列表 -->
		<template v-if="listDefault.length">
			<list-default
				ref="listDefault"
				v-for="item in listDefault"
				:style="'order:'+item.order+';'"
				:item="item"></list-default>
		</template>
		<!-- 瀑布流列表 -->
		<template v-if="listWaterfall.length">
			<list-waterfall
				ref="listWaterfall"
				v-for="item in listWaterfall"
				:style="'order:'+item.order+';'"
				:item="item"></list-waterfall>
		</template>
		<!-- 附近帖子列表 -->
		<template v-if="listVicinityPost.length">
			<list-vicinity-post
				ref="listVicinityPost"
				v-for="item in listVicinityPost"
				:style="'order:'+item.order+';'"
				:item="item"></list-vicinity-post>
		</template>
		<!-- 问答列表 -->
		<template v-if="listAsk.length">
			<list-ask
				ref="listAsk"
				v-for="item in listAsk"
				:style="'order:'+item.order+';'"
				:item="item"></list-ask>
		</template>
		<!-- 我关注的用户发布的帖子等等 -->
		<template v-if="myTimelinesPost.length">
			<my-timelines-post
				ref="myTimelinesPost"
				v-for="item in myTimelinesPost"
				:style="'order:'+item.order+';'"
				:item="item"></my-timelines-post>
		</template>
		<!-- 互动列表 -->
		<template v-if="listInteraction.length">
			<list-interaction
				ref="listInteraction"
				v-for="item in listInteraction"
				:style="'order:'+item.order+';'"
				:item="item"></list-interaction>
		</template>
		<!-- 我互动的帖子列表 -->
		<template v-if="myMarkPost.length">
			<my-mark-post
				v-for="item in myMarkPost"
				:style="'order:'+item.order+';'"
				:item="item"></my-mark-post>
		</template>
		<!-- 我互动的用户列表 -->
		<template v-if="myMarkUser.length">
			<my-mark-user
				v-for="item in myMarkUser"
				:style="'order:'+item.order+';'"
				:item="item"></my-mark-user>
		</template>
		<!-- 朋友圈列表 -->
		<template v-if="listCircle.length">
			<list-circle
				ref="listCircle"
				v-for="item in listCircle"
				:style="'order:'+item.order+';'"
				:item="item"></list-circle>
		</template>
		<!-- 简单列表 -->
		<template v-if="listSimpleSorting.length">
			<list-simple-sorting
				v-for="item in listSimpleSorting"
				:style="'order:'+item.order+';'"
				:item="item"></list-simple-sorting>
		</template>
		<!-- 滑动标签推荐 DIY 组件 -->
		<template v-if="boxSwiperHashtag.length">
			<box-swiper-hashtag
				v-for="item in boxSwiperHashtag"
				:style="'order:'+item.order+';'"
				:item="item"></box-swiper-hashtag>
		</template>
		<!-- 滚动头条组件 -->
		<template v-if="boxSwiperHot.length">
			<box-swiper-hot
				v-for="item in boxSwiperHot"
				:style="'order:'+item.order+';'"
				:item="item"></box-swiper-hot>
		</template>
		<!-- 滑动图文 -->
		<template v-if="boxSwiperListText.length">
			<box-swiper-list-text
				v-for="item in boxSwiperListText"
				:style="'order:'+item.order+';'"
				:item="item"></box-swiper-list-text>
		</template>
		<!-- 滑动用户 -->
		<template v-if="boxSwiperListUser.length">
			<box-swiper-list-user
				v-for="item in boxSwiperListUser"
				:style="'order:'+item.order+';'"
				:item="item"></box-swiper-list-user>
		</template>
		<!-- 滑动用户1 -->
		<template v-if="boxSwiperListUser1.length">
			<box-swiper-list-user-1
				v-for="item in boxSwiperListUser1"
				:style="'order:'+item.order+';'"
				:item="item"></box-swiper-list-user-1>
		</template>
		<!-- 滑动帖子列表 -->
		<template v-if="boxSwiperListPost.length">
			<box-swiper-list-post
				v-for="item in boxSwiperListPost"
				:style="'order:'+item.order+';'"
				:item="item"></box-swiper-list-post>
		</template>
		<!-- 标签列表 -->
		<template v-if="listHashtag.length">
			<list-hashtag
				v-for="item in listHashtag"
				:style="'order:'+item.order+';'"
				:item="item"></list-hashtag>
		</template>
		<!-- html模块 -->
		<template v-if="html.length">
			<mp-html
				v-for="item in html"
				:content="item.html"
				:style="'order:'+item.order+';'"
				:selectable="true"/>
		</template>
		<!-- 幻灯片 -->
		<template v-if="boxSwiperSlide.length">
			<box-swiper-slide
				v-for="item in boxSwiperSlide"
				:style="'order:'+item.order+';'"
				:item="item"></box-swiper-slide>
		</template>
		<!-- 单页小组 -->
		<template v-if="boxGroupTree">
			<box-group-tree
				:style="'order:'+boxGroupTree.order+';'"
				:item="boxGroupTree"></box-group-tree>
		</template>
		<!-- 单页小组 -->
		<template v-if="boxGroupTree1">
			<box-group-tree1
				:style="'order:'+boxGroupTree1.order+';'"
				:item="boxGroupTree1"></box-group-tree1>
		</template>
		<!-- 侧边按钮 -->
		<template v-if="boxSidebarButton">
			<box-sidebar-button
				:item="boxSidebarButton"></box-sidebar-button>
		</template>
		<!-- 单页发布 -->
		<template v-if="screenPublish1">
			<screen-publish-1 :item="screenPublish1"></screen-publish-1>
		</template>
		<!-- 单页发布 -->
		<template v-if="screenPublish2">
			<screen-publish-2 :item="screenPublish2"></screen-publish-2>
		</template>
	</view>
</template>

<script>
	export default {
		name:"youransns-diy",
		props:{
			youransnsConfig:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				listKeys: [
					'listDefault','listAsk','listWaterfall','listVicinityPost','listCircle','listInteraction','myTimelinesPost'
				],
				max : {order: 0, parent: null, index: 0, comKey: ''},
				listDefault:[],
				listWaterfall:[],
				listAsk:[],
				listHashtag:[],
				listSimpleSorting:[],
				html:[],
				listVicinityPost:[],
				listCircle:[],
				listInteraction:[],
				boxGroupTree:null,
				boxGroupTree1:null,
				screenPublish1:null,
				screenPublish2:null,
				boxSidebarButton:null,
				boxSwiperSlide:[],
				boxSwiperHot:[],
				boxSwiperHashtag:[],
				boxSwiperListText:[],
				boxSwiperListUser:[],
				boxSwiperListUser1:[],
				boxSwiperListPost:[],
				myMarkPost:[],
				myMarkUser:[],
				myTimelinesPost:[],
				boxSwiperGroup:[]
			};
		},
		computed: {
			lastListCom() {
				const listCom = this.$refs?.[this.max.comKey]?.[this.max.index]
				if (typeof listCom?.getList !== 'function') return;
				return listCom
			}
		},
		unmounted() {
			uni.$off('onReachBottom')
		},
		mounted(){
			uni.$on('onReachBottom', () => {
				if (!this.lastListCom) return;
				if (this.lastListCom.listStatus === 'loading') return;
				this.lastListCom.clickMoreButton()
			})
			if(this.youransnsConfig.listDefault){
				this.listDefault = this.youransnsConfig.listDefault;
			}
			if(this.youransnsConfig.listWaterfall){
				this.listWaterfall = this.youransnsConfig.listWaterfall;
			}
			if(this.youransnsConfig.listAsk){
				this.listAsk = this.youransnsConfig.listAsk;
			}
			if(this.youransnsConfig.myTimelinesPost){
				this.myTimelinesPost = this.youransnsConfig.myTimelinesPost;
			}
			if(this.youransnsConfig.listSimpleSorting){
				this.listSimpleSorting = this.youransnsConfig.listSimpleSorting;
			}
			if(this.youransnsConfig.listHashtag){
				this.listHashtag = this.youransnsConfig.listHashtag;
			}
			if(this.youransnsConfig.html){
				this.html = this.youransnsConfig.html;
			}
			if(this.youransnsConfig.boxGroupTree){
				this.boxGroupTree = this.youransnsConfig.boxGroupTree;
			}
			if(this.youransnsConfig.boxGroupTree1){
				this.boxGroupTree1 = this.youransnsConfig.boxGroupTree1;
			}
			if(this.youransnsConfig.screenPublish1){
				this.screenPublish1 = this.youransnsConfig.screenPublish1;
			}
			if(this.youransnsConfig.screenPublish2){
				this.screenPublish2 = this.youransnsConfig.screenPublish2;
			}
			if(this.youransnsConfig.boxSidebarButton){
				this.boxSidebarButton = this.youransnsConfig.boxSidebarButton;
			}
			if(this.youransnsConfig.listVicinityPost){
				this.listVicinityPost = this.youransnsConfig.listVicinityPost;
			}
			if(this.youransnsConfig.listCircle){
				this.listCircle = this.youransnsConfig.listCircle;
			}
			if(this.youransnsConfig.boxSwiperSlide){
				this.boxSwiperSlide = this.youransnsConfig.boxSwiperSlide;
			}
			if(this.youransnsConfig.boxSwiperHot){
				this.boxSwiperHot = this.youransnsConfig.boxSwiperHot;
			}
			if(this.youransnsConfig.boxSwiperHashtag){
				this.boxSwiperHashtag = this.youransnsConfig.boxSwiperHashtag;
			}
			if(this.youransnsConfig.boxSwiperListText){
				this.boxSwiperListText = this.youransnsConfig.boxSwiperListText;
			}
			if(this.youransnsConfig.boxSwiperListUser){
				this.boxSwiperListUser = this.youransnsConfig.boxSwiperListUser;
			}
			if(this.youransnsConfig.boxSwiperListUser1){
				this.boxSwiperListUser1 = this.youransnsConfig.boxSwiperListUser1;
			}
			if(this.youransnsConfig.boxSwiperListPost){
				this.boxSwiperListPost = this.youransnsConfig.boxSwiperListPost;
			}
			if(this.youransnsConfig.myMarkPost){
				this.myMarkPost = this.youransnsConfig.myMarkPost;
			}
			if(this.youransnsConfig.myMarkUser){
				this.myMarkUser = this.youransnsConfig.myMarkUser;
			}
			if(this.youransnsConfig.boxSwiperGroup){
				this.boxSwiperGroup = this.youransnsConfig.boxSwiperGroup;
			}
			if(this.youransnsConfig.listInteraction){
				this.listInteraction = this.youransnsConfig.listInteraction;
			}
			this.listKeys.forEach(key => {
				const listData = this[key]
				if (!listData?.length) return;
				listData.forEach((item, index) => {
					const { order } = item
					if (order < this.max.order) return;
					this.max = {index, order, paretn: listData, comKey: key}
				})
			})
		},
	}
</script>

<style>

</style>